<template>
	<div style="max-height: 150px;overflow: auto" v-show="!isNotShowBtn">
		<div v-for="item in this.selectedDeptList" :key="item.deptId" style="display: inline-block;">
			<el-tag style="margin-right: 10px">
				{{ item.deptName }}
				<el-icon color="#409EFF" @click="removeDept(item.deptId)">
					<el-icon-close/>
				</el-icon>
			</el-tag>
		</div>
	</div>
	<el-button v-show="!isNotShowBtn" type="primary" icon="sc-icon-dept" @click="selectOrgDept" style="margin-left: 10px">选部门</el-button>
	<el-dialog :title="`部门选择【`+(this.mode?'多选':'单选')+`】`" v-model="visible" :width="640" destroy-on-close @closed="closeDialog">
		<div class="right-panel-search" style="margin-top: -20px">
			<el-input placeholder="部门名称 / 别名" v-model="this.search.keyword" clearable></el-input>
			<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
		</div>
		<el-container>
			<el-aside width="200px" v-loading="showGrouploading">
				<el-container>
					<el-header>
						<el-input placeholder="筛选部门" v-model="groupFilterText" clearable></el-input>
					</el-header>
					<el-scrollbar style="height: 300px;">
						<el-main class="nopadding">
							<el-tree ref="group" class="menu" node-key="deptId" :data="group" :props="groupsProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
									 :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
						</el-main>
					</el-scrollbar>
				</el-container>
			</el-aside>
			<el-container width="200px">
				<el-header>
					备选
					<el-button size="mini" type="danger" @click="selectQx">全选</el-button>
				</el-header>
				<el-scrollbar style="height: 300px;">
					<template v-for="(item,index) in this.deptList" :key="item.deptId">
						<el-row :gutter="24" style="margin:1px 5px 1px 5px;cursor: pointer;background-color: #fafafa;" @click="selectEl(item,index)">
							<el-col :span="4" style="font-size: 18px;font-weight: 600;line-height: 32px">
								<el-icon color="#409EFF">
									<sc-icon-dept-icon/>
								</el-icon>
							</el-col>
							<el-col :span="20" class="omit" :title="item.deptName">{{ item.deptName }}</el-col>
						</el-row>
					</template>
				</el-scrollbar>
			</el-container>
			<el-aside width="200px">
				<el-container>
					<el-header>
						已选
						<el-button size="mini" type="danger" @click="selectFx">反选</el-button>
					</el-header>
					<el-scrollbar style="height: 300px;">
						<template v-for="(uitem,uindex) in this.selectedDeptList" :key="uitem.deptId">
							<el-row :gutter="24" style="margin:1px 5px 1px 5px;cursor: pointer;background-color:#fafafa;" @click="unSelectEl(uitem,uindex)">
								<el-col :span="4" style="font-size: 18px;font-weight: 600;line-height: 32px">
									<el-icon color="#409EFF">
										<sc-icon-dept-icon/>
									</el-icon>
								</el-col>
								<el-col :span="16" class="omit" :title="uitem.deptName">{{ uitem.deptName }}</el-col>
								<el-col :span="4" style="font-size: 18px;font-weight: 600;line-height: 32px">
									<el-icon color="#409EFF">
										<el-icon-check/>
									</el-icon>
								</el-col>
							</el-row>
						</template>
					</el-scrollbar>
				</el-container>
			</el-aside>
		</el-container>
		<template #footer>
			<el-button @click="selectAllDept" v-if="this.mode" type="success">全体部门</el-button>
			<el-button @click="closeSelect">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="selectOk()">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	props: {
		resType:{type:String},//1:返回部门，同时不过行初始化
		deptId: {type: String},
		mode: {type: Boolean},
		tempOrgId:{type:String},
		isNotShowBtn: Object
	},
	data() {
		return {
			visible: false,
			isSaveing: false,
			isSelectAll: false,
			dialog: {
				isShow: false
			},
			showGrouploading: false,
			groupFilterText: '',
			group: [],
			groupsProps: {
				label: "deptName",
				value: "deptId"
			},
			search: {
				keyword: null
			},
			deptList: [],
			selectedDeptList: [],
			backDeptList: [],
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		},
    deptId()
    {
		if(this.resType!='1') {
			this.initSelectDialog();
		}
    }
	},
	mounted() {
		if(this.resType!='1') {
			this.initSelectDialog();
		}
	},
	methods: {
		selectEl(item, index) {
			if (this.mode) {
				var obj = false;
				this.selectedDeptList.find((sitem) => {
					if (sitem.deptId === item.deptId || sitem.deptId === "@all") {
						obj = true;
					}
				});
				if (!obj) {
					this.selectedDeptList.push(item);
					this.deptList.splice(index, 1);
				} else {
					this.$alert("不可重复选择！", "提示", {type: 'error'})
				}
			} else {
				if (this.selectedDeptList.length > 0) {
					this.$alert("单选模式不可多选！", "提示", {type: 'error'})
				} else {
					this.deptList.splice(index, 1);
					this.selectedDeptList.push(item);
				}
			}
		},
		unSelectEl(uitem, uindex) {
			var obj = false;
			this.deptList.find((item) => {
				if (item.deptId === uitem.deptId) {
					obj = true;
				}
			});
			this.selectedDeptList.splice(uindex, 1);
			if (!obj) {
				if (uitem.deptId != "@all") {
					this.deptList.push(uitem);
				}
			}
		},
		selectAllDept() {
			this.deptList = [];
			this.selectedDeptList = [{deptId: '@all', deptName: '全体部门'}];
			this.backDeptList = this.selectedDeptList;
			this.visible = false;
			if(this.resType=="1")
			{
				this.$emit('update:deptId',"全体部门")
			}else
			{
				this.$emit('update:deptId', '@all')
			}
		},
		selectQx() {
			if (this.mode) {
				var isAll = false;
				this.selectedDeptList.forEach(item => {
					if (item.deptId === "@all") {
						isAll = true;
						return;
					}
				})
				if (isAll) {
					this.$alert("已是全体,不可全选！", "提示", {type: 'error'})
				} else {
					if (this.selectedDeptList.length == 0) {
						this.selectedDeptList = this.deptList;
					} else {
						this.deptList.forEach(element => {
							var flag = false;
							this.selectedDeptList.forEach(item => {
								if (element.deptId === item.deptId) {
									flag = true;
									return;
								}
							})
							if (!flag) {
								this.selectedDeptList.push(element);
							}
						});
					}
					this.deptList = [];
				}
			} else {
				if (this.deptList.length > 1 || this.selectedDeptList.length == 1) {
					this.$alert("单选模式不可多选！", "提示", {type: 'error'})
				} else {
					if (this.deptList.length > 0) {
						this.selectedDeptList = this.deptList;
						this.deptList = [];
					}
				}
			}
		},
		selectFx() {
			this.selectedDeptList.forEach(item => {
				if (!this.deptList.includes(item)) {
					this.deptList.push(item);
				}
			})
			this.selectedDeptList = [];
		},
		async getDeptGroup() {
			this.showGrouploading = true;
			let res;
			if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0')
			{
				res = await this.$API.system.unitDept.list.get();
			}else {
				res = await this.$API.system.tempOrg.getTempDeptList.get({tempOrgId:this.tempOrgId});
			}
			this.showGrouploading = false;
			this.group = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.deptName.indexOf(value) !== -1;
		},
		//树点击事件
		async groupClick(data) {
			let res;
			if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
				res = await this.$API.system.unitDept.getDeptListByDeptIdForSelect.get({parentId: data.deptId});
			}else {
				res = await this.$API.system.tempOrg.getDeptListByTempDeptIdForSelect.get({tempOrgId:this.tempOrgId,parentId: data.deptId});
			}
			if (res.code == 200) {
				var tepmArr = [];
				res.data.forEach(item => {
					var obj = false;
					this.selectedDeptList.find((sitem) => {
						if (sitem.deptId === item.deptId || sitem.deptId === "@all") {
							obj = true;
						}
					});
					if (!obj) {
						tepmArr.push(item)
					}
				})
				this.deptList = tepmArr;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//搜索
		async upsearch() {
			let res;
			if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
				res = await this.$API.system.unitDept.getDeptListByDeptIdForSelect.get({parentId: data.deptId});
			}else {
				res = await this.$API.system.tempOrg.getDeptListByTempDeptIdForSelect.get({tempOrgId:this.tempOrgId,keyword: this.search.keyword});
			}
		},
		selectOk() {
			this.visible = false;
			this.backDeptList = this.selectedDeptList;
			let resArr = [];
			let strArr = [];
			this.backDeptList.forEach(item => {
				resArr.push(item.deptId);
				strArr.push(item.deptName);
			})
			if(this.resType=="1")
			{
				this.$emit('update:deptId',strArr.join(","))
			}else
			{
				this.$emit('update:deptId', resArr.join(","))
			}
		},
		async initSelectDialog() {
			if (this.deptId != ""&&this.deptId!=null&&this.deptId!=undefined) {
				let res;
				if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
					res = await this.$API.system.unitDept.getDeptListByDeptIds.get({deptIds: this.deptId});
				}else{
					res = await this.$API.system.tempOrg.getDeptListByTempDeptIds.get({tempOrgId:this.tempOrgId,deptIds: this.deptId});
				}
				if (res.code == 200) {
					this.selectedDeptList = res.data;
					this.backDeptList = [];
					this.selectedDeptList.forEach(item => {
						this.backDeptList.push(item);
					})
				}
			}else {
        this.selectedDeptList=[];
        this.backDeptList = [];
      }
		},
		removeDept(deptId) {
			for (var i = 0; i < this.selectedDeptList.length; i++) {
				if (this.selectedDeptList[i].deptId == deptId) {
					this.selectedDeptList.splice(i, 1);
				}
			}
			let resArr = [];
			let strArr =[];
			this.selectedDeptList.forEach(item => {
				resArr.push(item.deptId)
				strArr.push(item.deptName);
			})
			if(this.resType=="1")
			{
				this.$emit('update:deptId',strArr.join(","))
			}else
			{
				this.$emit('update:deptId', resArr.join(","))
			}
		},
		selectOrgDept() {
			this.getDeptGroup();
			this.deptList = [];
			this.backDeptList = [];
			this.selectedDeptList.forEach(item => {
				this.backDeptList.push(item);
			})
			this.dialog.isShow = true
			this.$nextTick(() => {
				this.visible = true;
				return this
			})
		},
		closeSelect() {
			this.selectedDeptList = this.backDeptList;
			this.visible = false
		},
		closeDialog() {
			this.selectedDeptList = this.backDeptList;
			this.$emit('closed')
		}
	}
}
</script>
<style>
.omit {
	font-size: 14px;
	font-weight: 600;
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
